<template>
  <div class="create_offline">
      <a-spin size="large" :spinning="generateStatus!=''" :tip="tip" :class="{success:generateStatus==1,error:generateStatus==2,progress:generateStatus==3}">
        <a-form-model ref="ruleForm" 
            :model="formData" 
            :rules="rules"
            :label-col="{ lg: { span: 8 }, sm: { span: 8 } }" 
            :wrapper-col="{ lg: { span: 8 }, sm: { span: 8 } }">
            <a-form-model-item label="资源包名称" prop="packetName">
                <a-input v-model="formData.packetName" :maxLength="200" placeholder="前请输入资源包名称"/>
            </a-form-model-item>
            <!-- <a-form-model-item label="资源包版本" prop="version">
                <a-input v-model="formData.version" placeholder="前请输入资源包版本"/>
            </a-form-model-item> -->
            <a-form-model-item label="设备类型" prop="deviceType">
                <a-select v-model="formData.deviceType" :options="deviceTypeList" placeholder="请选择"></a-select>
            </a-form-model-item>
          <a-form-model-item label="是否启用设备类型"  prop="">
            <a-switch @change="isEnableChange" v-model="formData.isEnable"></a-switch>
          </a-form-model-item>
            <a-form-model-item :wrapper-col="{ lg: { offset: 8 }, sm: { offset: 8 } }">
                <a-space>
                    <a-button type="primary" @click="handleCreateOfflinePackage">生成离线包</a-button>
                    <a-button @click="handleBack">取消</a-button>
                </a-space>
            </a-form-model-item>

        </a-form-model>
      </a-spin>
      <div class="btn_group" v-if="generateStatus">
          <a-space>
                <a-button @click="handleClose()" v-if="generateStatus==2 || generateStatus==3">关闭</a-button>
                <a-button @click="handleClose()" type="primary" v-if="generateStatus==1">关闭</a-button>
                <a-button @click="handleClose(true)" type="primary" v-if="generateStatus==2">重新生成</a-button>
          </a-space>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return { 
            deviceTypeList:[
                {
                    label:'大屏',
                    value:1
                },{
                    label:'手机端',
                    value:2
                }
            ],
            formData:{
                packetName:'',
                deviceType:'',
                isEnable:false
            },
            rules:{
                packetName:{ required: true, message: '请输入资源包名称' },
                deviceType:{ required: true, message: '请选择设备类型' },
            },
            tip:'',
            generateStatus:'',//生成状态(1:成功;2:失败;3:生成中)
            id:'',
            si:null,
        }
    },
    watch:{
        generateStatus:{
            handler(newVal){
                if(newVal==1){
                    this.tip='生成成功';
                }
                else if(newVal==2){
                    this.tip='生成失败';
                }
                else if(newVal==3){
                    this.tip='生成中';
                }
                else {
                    this.tip='';
                }
            },
            immediate:true,
        }
    },
    created(){
        
    },
    beforeRouteLeave (to, from, next) {
        if(this.si){
            clearInterval(this.si);
        }
        next();
    },
    methods:{
        checkCreateResult(){
            this.si=setInterval(()=>{
                this.createResult();
                if(this.generateStatus=='' || this.generateStatus==1 || this.generateStatus==2){
                    clearInterval(this.si);
                }
            },3000);
        },
        async createResult(){
            let res=await this.$get('goldenhome/gh/resource/package/admin_/resource/packet/id',
                {id:this.id},
                {preventLoading: true}
            );
            if(res && res.returnCode=='1000'){
                this.generateStatus=(res.dataInfo || {}).generateStatus;
            }
            else {
                this.generateStatus='';
            }
        },
        handleBack(){
            this.$router.push({
                name:'GalleryGallerySettingOfflineResourcePackage'
            })
        },
        createPackage(){
            this.$post('goldenhome/gh/resource/package/admin_/resource/packet/add',{
                packetName:this.formData.packetName,
                deviceType:this.formData.deviceType,
                isEnable:this.formData.isEnable ==true?1:0
            }).then(res=>{
                if(res && res.returnCode=='1000'){
                    this.formData={
                        packetName:'',
                        deviceType:''

                    }
                    this.id=res.dataInfo||'';
                    this.generateStatus=3;
                    this.checkCreateResult();
                }
                else {
                    this.generateStatus='';
                    this.$message.error('添加离线资源包失败');
                }
            });
        },
        reCreatePackage(){
            this.$post('goldenhome/gh/resource/package/admin_/resource/packet/regenerate',{
                id:this.id,
            }).then(res=>{
                if(res && res.returnCode=='1000'){
                    this.generateStatus=3;
                    this.checkCreateResult();
                }
                else {
                    this.generateStatus='';
                    this.$message.error('重新生成离线资源包失败');
                }
            });
        },
        handleCreateOfflinePackage(){
          console.log(this.formData)
            this.$refs.ruleForm.validate(valid=>{
                if(valid){
                    this.createPackage();
                }
                else {
                    return false;
                }
            });
        },

        handleClose(isRestartCreate){
            if(isRestartCreate){//失败
                if(this.id){
                    this.reCreatePackage();
                }
            }
            else {
                this.generateStatus='';
                this.$router.push({
                    name:'GalleryGallerySettingOfflineResourcePackage'
                })
            }
        },
      isEnableChange(e){
          console.log(e)
      }
      
    }
}
</script>

<style lang="less" scoped>
.btn_group{
    text-align: center;
}
/deep/ .error{
    .ant-spin-text{
        color:red;
        margin-top:10px;
    }
}
/deep/ .success{
    .ant-spin-dot{
        display: none;
    }
    .ant-spin-text{
        margin-top:10px;
        font-size: 18px;
    }
}
/deep/ .progress{
    .ant-spin-text{
        margin-top:10px;
    }
}
</style>